<template>
	<div>
		<n-radio-group
			v-model:value="params.roleId"
			@update:value="getTableData">
			<n-radio-button v-for="(value, key) in api.roles" :value="key">{{value}}</n-radio-button>
		</n-radio-group>
		<n-transfer
			v-model:value="adminIds"
			:options="teachers"
			select-all-text="全选"
			clear-text="清空"
			source-filterable/>
		<n-button type="success" @click="save">保存</n-button>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/data/classadmin'
const props = defineProps(['teacherProps'])
const teachers = await api.getAdminList()
const params = reactive({
	roleId: '0',
	classId: props.teacherProps.id,
})
const adminIds = ref(await api.getTableData(params))
async function getTableData () {
	adminIds.value = await api.getTableData(params)
}
function save () {
	api.add({ ...params, adminIds: adminIds.value }, content => {
		props.teacherProps.show = false
	})
}
</script>

<style scoped lang="scss">
.n-transfer, .n-button {
	margin-top: 8px;
}
</style>